<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务四、五</title>

	<style type="text/css">
		.content {
			width: 500px;
			margin: 200px auto;
		}
		ul li {
			list-style: none;
			display: inline-block;
			background-color: #f00;
			padding: 8px;
			color: #fff;
			margin: 10px;
			cursor: pointer;
			vertical-align: bottom;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="operate">
		<textarea id="datain"></textarea><span>只能输入，分隔</span>
		<input type="button" value="左侧入" id="left-in"><br>
		<input type="text" placeholder="请输入查询字段" id="search-key">
		<input type="button" value="查询" id="search">
	</div>
	<ul id="queue">
	</ul>
</div>

<script type="text/javascript">

	function addLeft(direction){
		var datain = document.getElementById("datain").value;
		if(datain == "")
			return;
		var queue = document.getElementById("queue");
		var datalist = datain.split(",");
		var docFrag = document.createDocumentFragment();
		for(var key in datalist){
			var node = document.createElement("li");
			var para = document.createTextNode(datalist[key]);
			node.appendChild(para);
			docFrag.appendChild(node);
		}
		var firstchild = queue.firstChild;
		queue.insertBefore(docFrag,firstchild);
	}
	function searchData(){
		var search_key = document.getElementById("search-key").value;
		var queue = document.getElementById("queue");
		var li_list = queue.getElementsByTagName("li");
		for(var i=0;i<li_list.length;i++){
			var value = li_list[i].innerText;
			var patten = new RegExp(search_key);
			if(patten.test(value)){
				li_list[i].style.background = "blue";
			}
		}
	}
	function init(){
		var leftin = document.getElementById("left-in");
		var search = document.getElementById("search");
		var queue = document.getElementById("queue");
		queue.addEventListener("click",function(e){
			if(e.target.nodeName.toLowerCase() == "li")
				queue.removeChild(e.target);
		});
		leftin.addEventListener("click",addLeft);
		search.addEventListener("click",searchData);
	}
	init();
</script>	
</body>
</html>